import React from 'react';
// import {BrowserRouter, Route, Redirect, Switch} from 'react-router-dom'
import '../../static/topic/topicDetails.styl'
import {Button, Tabs} from 'antd';
import Summary from './../topic/summary'
import PublicList from './../topic/publicList'
import Graph from './../topic/graph'
import Modify from './../topic/modify'
import {withRouter} from 'react-router-dom'
import axios from 'axios'
import moment from 'moment';

const TabPane = Tabs.TabPane;

@withRouter
export default class TopicDetails extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      detailList: [],
      startTime: '',
      endTime: '',
      index:this.props.location.search.split('&')[0].replace(/[^0-9]/ig,""),
      key:this.props.location.search.split('&')[1].replace(/[^0-9]/ig,"")
    };
  }
  // 查询某个具体的专题
  introduceTitle = async () => {
    let res = await
      axios.post('vrv-monitor-platform-web/topic/read/detail', {
        id: this.state.index
      });
    this.setState(prevState => ({
      detailList: res.data.data
    }));
    this.setState({
      startTime: moment(this.state.detailList.monitorStartTime).format('YYYY年MM月DD日'),
      endTime: moment(this.state.detailList.monitorEndTime).format('YYYY年MM月DD日'),
    })
  };
  componentDidMount() {
    this.introduceTitle()
  }

  render() {
    return (
      <div className="totalPage">
        <div className="headline">
          <p className="operate">
            {this.state.detailList.topicName}
            <Button type="primary" size="small" ghost className="deleteOperate">删除</Button>
            <Button type="primary" size="small" className="visualization">可视化大屏</Button>
          </p>
          <p>生效时间：{this.state.startTime}-{this.state.endTime}</p>
        </div>
        <Tabs defaultActiveKey={this.state.key}>
          <TabPane tab="事件综述" key="1">
            <Summary index={this.state.index}/>
          </TabPane>
          <TabPane tab="舆情列表" key="2">
            <PublicList index={this.state.index}/>
          </TabPane>
          <TabPane tab="图表分析" key="3">
            <Graph index={this.state.index}/>
          </TabPane>
          <TabPane tab="专题修改" key="4">
            <Modify index={this.state.index}/>
          </TabPane>
        </Tabs>
      </div>
    );
  }
}